<script lang="ts">
import Vue from "vue";
import { Component, Model, Watch, Prop, Emit } from "vue-property-decorator";
import { RectPosition, StateNode } from "../dto";

@Component
class Rect extends Vue {
  @Model("change") data: StateNode;
  @Prop({ default: "" }) readonly stateId: string;
  // 容器宽度
  width: number = 0;
  // 容器高度
  height: number = 0;
  // 矩形容器位置
  position: RectPosition = { startX: 0, startY: 0, endX: 0, endY: 0, originX: 0, originY: 0 };
  // workflow 有图片的阶段
  imgNode: Array<string> = ['SHELL', 'SPARK', 'FLINK', 'LOGSTASH', 'DAGRUN', 'DATAFACTORY'];
  
  /**
   * flow class
   */
  get flowClass() {
    return (): string => (this.data.stateId == this.stateId ? "flow active-flow" : "flow");
  }

  @Watch("data.name")
  reRenderByName() {
    this.$nextTick(() => this.reRender());
  }

  @Watch("data.branchs")
  reRenderByBranchs() {
    this.$nextTick(() => this.reRender());
  }

  showBranch() {
    if (this.position.startX == this.position.endX && this.position.startY == this.position.endY) {
      this.$emit("click");
    }
  }

  /**
   * 开始移动
   */
  moveStart(e: any) {
    e.stopPropagation();
    e.preventDefault();
    this.resetPosition();
    this.position.startX = e.clientX;
    this.position.startY = e.clientY;
    document.addEventListener("mousemove", this.handleMove);
  }

  /**
   * 移动
   */
  handleMove(e) {
    let x = this.position.originX + e.clientX - this.position.startX;
    let y = this.position.originY + e.clientY - this.position.startY;
    if (x < 0 || y < 0) return;
    this.data.x = x;
    this.data.y = y;
    // this.resizeScroll(e);
  }

  /**
   * 松开移动
   */
  moveEnd(e: any) {
    e.stopPropagation();
    e.preventDefault();
    this.position = {
      ...this.position,
      originX: this.data.x,
      originY: this.data.y,
      endX: e.clientX,
      endY: e.clientY
    };
    document.removeEventListener("mousemove", this.handleMove);
  }

  /**
   * 移动组件时，需要动态计算滚动条
   */
  resizeScroll(e: any) {
    let svg = document.getElementById("svg") as any;
    // 高度滚动自适应
    if (svg.height.baseVal.value - this.data.y - e.target.offsetHeight < 100) {
    }
    // 宽度滚动自适应
    if (svg.width.baseVal.value - this.data.x - e.target.offsetWidth < 100) {
    }
  }

  /**
   * svg element 不具有自适应性
   * @see 计算svg->foreignObject，宽高
   */
  reRender() {
    let flow = document.getElementById(this.data.stateId) as any;
    this.height = flow.offsetHeight;
    this.width = flow.scrollWidth + 10;
  }

  /**
   * 修改名称
   */
  editName(e: any) {
    e.stopPropagation();
    this.$emit("edit");
  }

  /**
   * 删除状态
   */
  deleteState(e: any) {
    e.stopPropagation();
    this.$emit("delete");
  }

  /**
   * 编辑任务
   */
  editTask(e: any) {
    e.stopPropagation();
    this.$emit("edit-task");
  }
  editDataFactory(e: any) {
    e.stopPropagation();
    this.$emit("edit-data-factory");
  }
  /**
   * 重置初始坐标
   */
  resetPosition() {
    this.position.originX = this.data.x;
    this.position.originY = this.data.y;
  }

  /**
   * 复制
   */
  copy(e: any) {
    e.stopPropagation();
    this.$emit("copy");
  }

  mounted() {
    this.reRender();
  }

  created() {
    // this.resetPosition();
  }
}
export default Rect;
</script>

<template>
  <g
    v-if="data"
    class="flow-g-container"
    :transform="`translate(${data.x} ${data.y})`"
    @mousedown="moveStart"
    @mouseup.prevent="moveEnd"
    @click="showBranch"
  >
    <foreignObject :width="width" :height="height" fill="#fff" style="overflow: inherit">
      <div :id="data.stateId" :class="flowClass()">
        <div class="title">
          <div class="item-box">
            <img class="image" v-if="imgNode.indexOf(data.type) >= 0 " :src="require('./images/' + data.type + '.jpg')"/>
            <span class="ball" v-else></span>
            <span class="flow-name">{{ data.name }}</span>
          </div>
          <div class="more-action" v-show="data.type !== 'END'">
            <i class="el-icon-more"></i>
            <div class="more-action-container">
              <div @click="deleteState" class="action-list">删除</div>
              <template v-if="data.nodeType" >
                <div v-if="data.name !== '原始日志'" @click="editDataFactory" class="action-list">编辑</div>
              </template>
              <div v-else @click="editTask" class="action-list">编辑任务</div>
            </div>
          </div>
        </div>
      </div>
    </foreignObject>
  </g>
</template>

<style lang="scss" scoped>
@import "./index.scss";
</style>
